<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
    
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>系统用户列表</title> 

<link href="${ctx }/css/base.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx }/custom/uimaker/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx }/custom/uimaker/icon.css">
<link rel="stylesheet" href="${ctx }/css/providers.css">
</head> 
<body>
    <div class="container">
	    	<table id="dg" class="easyui-datagrid" style="width:100%;height:500px"  data-options="
                url:'${ctx}/user/find',
                rownumbers:true,
                singleSelect:false,
                autoRowHeight:false,
                pagination:true,
                fitColumns:true,
                striped:true,
                checkOnSelect:false,
                selectOnCheck:false,
                collapsible:true,
                toolbar:'#tb',
                pageSize:10,
                onBeforeEdit:function(index,row){
                	row.editing=true;
                	editAction(index);
                },
                onAfterEdit:function(index,row){
                	row.editing=false;
                	editAction(index);
                },
                onCancelEdit:function(index,row){
                	row.editing=false;
                	editAction(index);
                }
                ">
		            <thead>
		                <tr>
		                    <th field="loginName" width="110" data-options="editor:'textbox'">登录名</th>
		                    <th field="password" width="226" data-options="editor:'textbox'">密码</th>
		                    <th field="type" width="112" data-options="editor:'textbox'">用户类别</th>
		                    <th field="roleId" width="170" data-options="editor:'textbox'">所属角色</th>
		                    <th field="active" align="center" width="105" data-options="
		                    	formatter:function(v,r,i){
		                    		var str = '';
		                    		if('admin'!=r.loginName){
			                    		if(!r.editing){
				                    		str += '<a href=\'#\' onclick=\'editRow(this)\'>编辑</a>&nbsp;|&nbsp;';
				                    		str += '<a href=\'#\' onclick=\'delRow(this)\'>删除</a>';
			                    		}else{
				                    		str += '<a href=\'#\' onclick=\'saveRow(this)\'>保存</a>&nbsp;|&nbsp;';
				                    		str += '<a href=\'#\' onclick=\'cancelRow(this)\'>取消</a>';
			                    		}
		                    		}
		                    		return str;
		                    	}
		                    ">操作</th>
		                </tr>
		            </thead>
		        </table>
		      <input type="hidden" id="ctx" value="${ctx }">  
		      <div id="tb" style="padding:0 30px;">
		        	登录名: <input class="easyui-textbox" type="text" name="code" style="width:166px;height:35px;line-height:35px;"></input>
		        	用户类型: <input class="easyui-textbox" type="text" name="name" style="width:166px;height:35px;line-height:35px;"></input>
		        <a href="#" class="easyui-linkbutton" iconCls="icon-search" data-options="selected:true">查询</a>
		        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addRow()">新增</a>
		        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="excelOut()">Excel导出</a>
		        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="excelIn()">Excel导入</a>
		      </div>
       
    </div>
    <div id="d1"></div>
    <script type="text/javascript" src="${ctx }/custom/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx }/custom/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${ctx }/custom/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${ctx }/js/iud.js"></script>
    <script type="text/javascript" src="${ctx }/js/jquery-form.js"></script>
    <script type="text/javascript">
    	//excel的导出
    	function excelOut(){
    		$("#d1").dialog({
    			title:'用户表的excel导出',
    			width:300,
    			height:160,
    			modal:true,
    			href:'${ctx}/file/out',
    			buttons:[{
    				text:'excel导出',
    				iconCls:'icon-save',
    				handler:function(){
    					var f = $('#formData');
    					if(!f.form('validate')){
    						alert("请输入文件名");
    						return;
    					}
    					var option = {
    							type:'post',
    							url:'${ctx}/file/outFile',
    							dataType:'json',
    							success:function(r){
    								alert(r.msg);
    								if(r.sus){
    									$("#d1").dialog('close');
    								}
    							}
    					};
    					f.ajaxSubmit(option);
    				}
    			},{
    				text:'取消',
    				iconCls:'icon-cancel',
    				handler:function(){
    					$("#d1").dialog('close');
    				}
    			}]
    		});
    	}
    	
    	
    	function excelIn(){
			$("#d1").dialog({
				title:'用户信息的导入',
				width:350,
				height:150,
				modal:true,
				href:'${ctx}/file/in',
				buttons:[{
					text:'excel导入',
					iconCls:'icon-save',
					handler:function(){
						var f = $("#dataForm");
						var option = {
							type:'post',
							url:'${ctx}/file/inFile',
							dataType:'json',
							headers:{"ClientCallMode":"ajax"},
							success:function(r){
								alert(r.msg);
								if(r.sus){
									$("#d1").dialog('close');
								}
							}
						};
						f.ajaxSubmit(option);
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#d1').dialog('close');
					}
				}]
			});
		}
    </script>
</body> 
</html>
    